<template>
    <div class="nav-menu">
        <el-menu
            :collapse-transition="false"
            :default-active="defaultActive"
            @select="handleSelect"
            :collapse="collapse"
            class="el-menu-vertical-demo"
            background-color="#304156"
            text-color="#bfcbd9"
            active-text-color="#409EFF"
        >
            <template v-for="(item,i) in routes">
                <sidebar-item
                    :key="i"
                    :routes="item"
                    v-if="item.hidden!==true"
                />
            </template>
        </el-menu>
    </div>
</template>

<script>
import sidebarItem from "./sidebarItem.vue";
export default {
    props: {
        collapse: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        handleSelect (key, keyPath) {
            this.$router.push({ name: key });
        },
    },
    computed: {
        routes () {
            return this.$router.options.routes;
        },
        defaultActive () {
            const { meta } = this.$route
            if (meta.activeMenu) {
                return meta.activeMenu
            }
            return this.$route.name
        },
    },
    components: {
        sidebarItem,
    },
};
</script>

<style lang="scss" scoped>
.nav-menu {
    height: 100%;
    overflow-y: scroll;
    ::v-deep .el-menu {
        border-right-width: 0px;
        .iconfont {
            margin: 0 10px 0 5px;
        }
    }
    // ::v-deep .is-active {
    //     background: #6986a3 !important;
    // }
    // ::v-deep .el-menu--inline .el-menu-item {
    //     background: #323e53 !important;
    //     text-indent: 10px;
    // }
    // ::v-deep .el-menu--inline .is-active {
    //     background: #6986a3 !important;
    // }
    // ::v-deep .el-submenu__icon-arrow {
    //     color: white;
    // }
    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
}
::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background-color: #f5f5f5;
}

// /*定义滚动条轨道 内阴影+圆角*/
// ::-webkit-scrollbar-track {
//     -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
//     border-radius: 10px;
//     background-color: #F5F5F5;
// }

// /*定义滑块 内阴影+圆角*/
// ::-webkit-scrollbar-thumb {
//     border-radius: 10px;
//     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
//     background-color: #555;
// }
</style>




